<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <!--引入bootstrap样式-->
    <link rel="stylesheet" href="./bootvue/css/bootstrap.css"/>
</head>
<body>
<div id="app">
    <!--导航-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">用户管理系统</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">欢迎：xx</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--中心布局-->
    <!--html + bootstrap(css) + vue + axios + springboot + mysql (db)-->

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="searchName">姓名</label>
                        <input type="text" class="form-control" id="searchName" v-model="searchName">
                    </div>
                    <div class="form-group">
                        <label for="phone">号码</label>
                        <input type="text" class="form-control" id="phone" v-model="searchCode">
                    </div>
                    <button type="submit" class="btn btn-info" @click.prevent="searchUser">搜索</button>
                </form>
            </div>
        </div>
        </span>
        <div class="row">

        </div>
        <div class="row" style="margin-top: 20px">
            <div class="col-md-8">
                <table class="table table-striped table-bordered table-hover">

                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>薪资</th>
                        <th>号码</th>
                        <th>操作</th>
                    </tr>
                    <tbody>
                    <tr v-for="user in users" :key="user.id">
                        <td>{{user.id}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.salary}}</td>
                        <td>{{user.phoneCode}}</td>
                        <td>
                            <button class="btn btn-danger" @click="del(user.id)">删除</button>
                            &nbsp &nbsp
                            <button class="btn btn-primary" @click="findOneUserById(user.id)">修改</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-4">
                <form>
                    <div class="form-group">
                        <label for="username">姓名：</label>
                        <input type="text" class="form-control" id="username" v-model="user.username"
                               placeholder="请输入名字">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄：</label>
                        <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
                    </div>
                    <div class="form-group">
                        <label for="salary">薪资：</label>
                        <input type="text" class="form-control" id="salary" v-model="user.salary" placeholder="请输入薪资">
                    </div>
                    <div class="form-group">
                        <label for="phoneCode">号码：</label>
                        <input type="text" class="form-control" id="phoneCode" v-model="user.phoneCode"
                               placeholder="请输入号码">
                    </div>
                    <button type="button" class="btn btn-default" @click="saveUser">提交</button>
                    <button type="reset" class="btn btn-danger" @click="reset">重置</button>

                </form>
            </div>
        </div>

    </div>
</div>
<script src="./bootvue/js/vue.js"></script>
<script src="./bootvue/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            users: [],
            user: {},
            //搜索框
            searchName: '',
            searchCode: ''
        },
        methods: {
            saveUser() {
                let _this = this;
                axios.post("http://localhost:8080/user/save", this.user).then(function (response) {
                    if (response.data.success) {
                        _this.findAll();
                        //清空上次保存的用户信息
                        _this.user = {};
                    } else {
                        alert(response.data.message);
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            findOneUserById(id) {
                let _this = this;
                axios.get("http://localhost:8080/user/findOne?id="+id).then(function (response) {
                    console.log(response.data);
                    _this.user = response.data;
                });
            },
            searchUser() {
                let _this = this;
                axios.get("http://localhost:8080/user/findLike?name=" + this.searchName + "&code=" + this.searchCode).then(function (response) {
                    _this.users = response.data;
                    _this.user = {};
                }).catch(function (error) {
                    console.log(error);
                });
            },
            del(id) {
                let _this = this;
                if (window.confirm('确定要删除')) {
                    axios.delete("http://localhost:8080/user/del?id=" + id).then(function (response) {
                        if (response.data.success) {
                            _this.findAll();
                        } else {
                            alert(response.data.message);
                        }
                    }).catch(function (err) {
                        console.log(err);
                    });
                }

            },
            reset() {
                this.user = '';
            },
            findAll() {
                let _this = this
                axios.get("http://localhost:8080/user/findAll").then(function (response) {
                    console.log(response.data);
                    _this.users = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        created() {
            this.findAll();
        }
    });
</script>
<script>

</script>
</body>
</html>